<template>
  <div class="">
    <!-- 导航 开始 -->
    <nav-bar title="位置"></nav-bar>
    <!-- 导航 end -->

    <div id="container" class="map_container"></div>
    <!-- 遮罩层 开始 -->
    <div class="show_loading" v-if="showLoading">
      <div class="loading">
        <van-loading size="60" />
        <div class="show_tips">地图加载中...</div>
      </div>
      <van-overlay :show="showLoading" />
    </div>
    <!-- 遮罩层 end -->
  </div>
</template>
<script>
let AMapLoader = null;
if (process.client) {
  //import AMapLoader from '@amap/amap-jsapi-loader';
  AMapLoader = require("@amap/amap-jsapi-loader");
}
import { MAP_JSAPI_KEY } from "@/utils/constants.js";
import { Loading, Overlay } from "vant";
export default {
  components: {
    [Loading.name]: Loading,
    [Overlay.name]: Overlay,
  },
  data() {
    return {
      aMap: "",
      showLoading: true,
    };
  },
  head() {
    return {
      link: [{ ref: "canonical", href: `${this.$domain}/map/location` }],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 地图初始化
    async initMap() {
      console.log(AMapLoader);
      let query = this.$route.query;
      console.log(query);
      let AMap = await AMapLoader.load({
        key: MAP_JSAPI_KEY, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.InfoWindow"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      });
      console.log(AMap);

      let map = new AMap.Map("container", {
        //设置地图容器id
        zoom: 14, //初始化地图级别
        center: [query.lng, query.lat], //初始化地图中心点位置
      });
      this.aMap = map;

      let toolBar = new AMap.ToolBar();
      map.addControl(toolBar);

      this.showLoading = false;
      this.drawMarker(query.lng, query.lat, query.name);
    },

    // 地图画点
    drawMarker(lng, lat, name) {
      const map = this.aMap;
      var marker = new AMap.Marker({
        position: [lng, lat], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: name,
      });
      map.add(marker);
      marker.setLabel({
        direction: "top",
        offset: new AMap.Pixel(0, -5), //设置文本标注偏移量
        content: `<div class='info'>${name}</div>`, //设置文本标注内容
      });
    },
  },
};
</script>
<style lang="less" scoped>
.map_container,
.show_loading {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.map_container {
  top: 46px;
}

.show_loading {
  z-index: 55;

  .loading {
    position: absolute;
    z-index: 56;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    .show_tips {
      margin-top: 20px;
    }
  }
}
</style>
<style lang="less">
.amap-marker-label {
  border: 1px solid #d8d8d8;
  padding: 10px;
  border-radius: 4px;
}
</style>